<template>
<div class="my_content colorFFF flex flex-col h-full">
    <div class="colorFFF flex flex-col h-full">
        <TitleBar>人流量</TitleBar>
        <div >
                <div class="absolute left-0 top-[25px]  h-[220px] w-[520px]" id="echarts_personnel"></div>
                <img class="absolute left-0 top-[215px] h-[90px] w-[90px]" :src="require('./assets/booking_visitors.png') "alt="" />
                <div class="absolute left-[78px] top-[234px] h-[64px] w-[180px] flex flex-col items-start p-0 gap-3 bacgroundPic">
                    <div class="title">预约访客数量</div>
                    <div class="value">1250<span>人</span></div> 
                </div>
                <img class="absolute left-[300px] top-[215px] h-[90px] w-[90px]" :src="require('./assets/visitors_ arrived.svg') "alt="" />
                <div class="absolute left-[379px] top-[234px] h-[64px] w-[180px] flex flex-col items-start p-0 gap-3 bacgroundPic">
                    <div class="title">已抵达访客数量</div>
                    <div class="value">1250<span>人</span></div>
                </div>
                <!-- <div class="bottomBox flex-none">
                    <div class="imgNumDiv">
                        <div class="leftvisitorNum">
                            <img :src="require('./assets/booking_visitors.png')" alt=""/>
                        </div>
                        <div class="rightNum booking_visitors">
                            <label class="title">预约访客数量</label>
                            <div style="margin-top: 10px;"><label class="num">{{response&&response.appointCount}}</label><small>人</small></div>
                        </div>
                    </div>
                    <div class="imgNumDiv">
                        <div  class="leftvisitorNum">
                            <img :src="require('./assets/visitors_ arrived.png')"/>
                        </div>
                        <div class="rightNum visitors_ arrived">
                            <label class="title">已抵达访客人数</label>
                            <div style="margin-top: 10px;"><label class="num">{{response&&response.arrivedCount}}</label><small>人</small></div>
                        </div>
                    </div>
                </div> -->
        </div>
    </div>
</div>
</template>

<script lang="ts">
import * as echarts from 'echarts';
import { visitorStatistics ,visitorNum} from "./api";
import { debounce } from 'lodash';
import { defineComponent } from 'vue'
import TitleBar from '../components/TitleBar.vue'

export default defineComponent({
    components: { TitleBar },
    inject: ['villageId'],
    data() {
        return {
           response:{
                    // allyDay:'',
                    appointCount:0,
                    arrivedCount:0,
                    // count:''
                },
                options: {
                    xLabel: ['5-12', '5-13', '5-14', '5-15', '5-16'],       // x轴，日期
                    yData: [29, 29, 29, 29, 29],                      // y轴，人流量
                } 
        }
    },
    watch:{
        // id:{
        //     handler(val, oldVal){
        //         this.villageId = val;
        //         this.setIntervalTotalFn()
        //     },
        //     immediate: true,
        // }
    },
    mounted(){
        this.initEcharts();
        this.setIntervalTotalFn()
    },
    destroyed(){
            clearInterval(this.timer);
            this.timer = null;
            this.myCharts && this.myCharts.dispose()
    },
    // destroyed(){
    //     clearInterval(this.timer);
    //     this.timer = null;
    //     this.myCharts && this.myCharts.dispose()
    // },
    methods:{
        setIntervalTotalFn() {
            const villageId = this.villageId
            if(villageId){
                this.visitorStatistics(villageId);
                this.visitorNum(villageId);
                this.timer = null;
                this.timer = setInterval(() => {
                    this.visitorStatistics(villageId);
                    this.visitorNum(villageId);
                }, 20000);
            }
        },
        visitorStatistics(villageId){
            // return
            visitorStatistics({villageId: villageId}).then(res=>{
                if(res.success == true){
                    this.options.xLabel =  res.data.date || []
                        this.options.yData = res.data.count || []
                        this.initEcharts()
                }
            })
        },
        visitorNum(villageId){
                // return
                visitorNum({villageId: villageId}).then(res=>{
                    if(res.success == true){
                        this.response.appointCount = res.data.appointCount
                        this.response.arrivedCount = res.data.arrivedCount
                        this.initEcharts()
                    }
                })
            },
        // 初始化echarts
        initEcharts() {
            this.myCharts && this.myCharts.dispose()
            var myCharts = echarts.init(document.getElementById('echarts_personnel'));
            var option = {
                legend: {
                    show: false,
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                grid: {
                    top: '20%',
                    left: '1%',
                    right: '2%',
                    bottom: '15%',
                    containLabel: true,
                    show: false
                },
                xAxis: [
                    {
                    type: 'category',
                    data: this.options['xLabel'],
                    axisLabel: {
                        show:true,
                        interval: 5,
                        textStyle: {
                            // color: '#6E6E6D',
                            color: '#D9D9D9',
                            fontWeight: 400,
                            fontFamily: 'OPPOSans',
                            fontSize: 12
                        }
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            type: "solid",
                            color: '#212634',
                            width: '1' //坐标线的宽度
                        }
                    },
                    axisTick: {
                            show: false,
                            alignWithLabel: true
                        },
                    // boundaryGap: true,
                    },
                    
                ],
                yAxis: [
                    {
                        type: 'value',
                        splitNumber: 5,
                        axisLabel: {
                            show: true,
                            formatter: '{value}',
                            textStyle: {
                                // color: '#6E6E6D',
                                color: '#D9D9D9',
                                fontSize: 12 //坐标值得具体的颜色,
                            }
                        },
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: '#212634', //网格横线颜色
                                width: 1,
                                type: 'solid'
                            }
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                type: 'solid',
                                color: '#212634',
                                width: '1' //坐标线的宽度
                            }
                        },
                    }
                ],
                series: [
                    {
                        name: '人流量',
                        type: 'bar',
                        barWidth: 4, //柱子宽度
                        barGap:1, //柱子之间间距
                        emphasis: {
                            focus: 'series'
                        },
                        itemStyle: { //柱样式
                            normal: {
                                color: new echarts.graphic.LinearGradient(
                                    0, 0, 0, 1,
                                    [
                                        {offset: 0, color: '#AEE4F8'},                   //柱图渐变色
                                        {offset: 1, color: '#171A24'},                 //柱图渐变色
                                        //{offset: 1, color: '#6D5B39'},                   //柱图渐变色
                                    ]
                                )
                            }
                        },
                        data: this.options['yData'],
                    } 
                ],
            };
            myCharts.setOption(option);
            const f = debounce(function () {
                if (myCharts.isDisposed()) {
                    window.removeEventListener('resize',f)
                } else {
                    myCharts.resize();
                }
            }, 500)
            window.addEventListener('resize', f)
            this.myCharts = myCharts
        }
        }
})

</script>

<style scoped lang="scss">
 .my_content{
        background: #02050E;
        .topPage{
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            #echarts_personnel{
                height: 100%;
                flex: 3;                            
            }
        .bottomBox{
            display: flex;
            justify-content: space-between;
            flex: 1;
            .imgNumDiv{
                height:64px;
                display: flex;
                margin-top: 15px;
                // justify-content: center;
                // align-items: center;
                flex: 1;
                .leftvisitorNum{
                    flex: 1.5;
                    img{
                        display: inline-block;
                        width: 100% !important;
                        height: 155% !important;
                        transform:translateY(-24px);
                    }
                }
                .rightNum{
                    flex: 2;
                    background: url('./assets/background.png') center/100% 100% no-repeat;
                }
                .title{
                    color: rgba(224, 247, 255, 0.8);
                    font-family: 'Noto Sans SC';
                    font-style: normal;
                    font-weight: 400;
                    font-size: 14px;
                    line-height: 20px;
                }
                .num{
                    color: #E0F7FF;
                    text-shadow: 0px 0px 6px rgba(251, 229, 187, 0.4);
                    font-size: 24px;
                    line-height: 20px;
                    letter-spacing:1px;
                    font-family: 'OPPOSans';
                    font-style: normal;
                    font-weight: 400;
                    margin-top: 5px;
                }
                small{
                    color: #E0F7FF;
                    font-family: 'OPPOSans';
                    font-style: normal;
                    font-weight: 400;
                    font-size: 12px;
                    line-height: 12px;
                    margin-left: 5px;
                }
            }
        }
    }
}

.title {
    font-family: 'Noto Sans SC';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    font-feature-settings: 'tnum' on, 'lnum' on;

    color: rgba(224, 247, 255, 0.8);
}
.value {
    font-family: 'OPPOSans';
    font-style: normal;
    font-weight: bold;
    font-size: 24px;
    line-height: 20px;
    font-feature-settings: 'tnum' on, 'lnum' on;
    color: #E0F7FF;
    text-shadow: 0px 0px 6px rgba(251, 229, 187, 0.4);
    span {
        margin-left: 10px;
        font-family: 'OPPOSans';
        font-style: normal;
        font-weight: 400;
        font-size: 12px;
        line-height: 12px;
        font-feature-settings: 'tnum' on, 'lnum' on;
        color: #E0F7FF;
    }
}
.bacgroundPic{
    background:  url("./assets/background.png")  no-repeat;
}
</style>